<template>
  <div class="chat-list-container">
    <div class="header flex">历史记录</div>
  <div class="chat-list-wrap">
    <div class="session-list">
      <a-row
        v-for="d in chatlist"
        :key="d.id"
        class="session-item"
        @click="routerTo(d)"
        @mouseenter.stop="itemHover(d.id)"
        @mouseleave.stop="itemLeave"
      >
        <div >
          <div class="icon icon-chat-dialog" style="margin-right: 14px;" :class="d.queryType === 1 ?' icon-chat-dialog':'icon-document-dialog'"></div>
        </div>
        <div >
          <div class="dialog-name">{{ d.dialogName }}</div>
        </div>

        <div v-if="d.id !== hoverItemId"  style="margin-left: auto;">
          <span class="date">
            {{ getDate(d.updatedTime) }}
          </span>
        </div>
        <div v-else style="margin-left: auto;"  >
          <div class="flex button-group">
            <div class="chat-list-delete-btn flex" @click.prevent.stop="handleMenuClick('remove',d.id)">
              <div class="chat-list-delete-icon icon" src="@/static/image/chat-list-delete.png"></div>
              <div>删除</div>
            </div>
            <div class="chat-list-edit-btn flex" @click.prevent.stop="handleMenuClick('rename', d.id, d.dialogName)">
              <div class="chat-list-edit-icon icon" ></div>
              <div>重命名</div>
            </div>
            
          </div>
          
        </div>
        <!-- <a-col :span="1" style="text-align: right">
          <a-dropdown trigger="click">
            <MoreIcon @click.prevent.stop />
            <template #overlay>
              <a-menu @click="handleMenuClick">
                <a-menu-item key="remove" :dialog-id="d.id"> 删除 </a-menu-item>
                <a-menu-item key="rename" :dialog-id="d.id" :dialog-name="d.dialogName">
                  重命名
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown></a-col
        > -->
      </a-row>
    </div>

    <a-modal v-model:visible="showCreateDialogModal" :title="modalTitle" @ok="handleUpdate">
      <a-form>
        <a-form-item label="会话名称" required="true">
          <a-input v-model:value="dialogName" :maxlength=20 />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  </div>
</template>
<script lang="ts" setup>
import { page, remove, saveOrUpdate } from '@/api/dialog'
import type { IDialogData, PdfFile } from '@/api/type'
import { getDate } from '@/utils'
import { Modal, message } from 'ant-design-vue'
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useRouter } from 'vue-router'
import { useChatBus } from '@/hook/useChatBus'
const router = useRouter()
const dialogName = ref('')
const showCreateDialogModal = ref(false)
const dialogId = ref('')
const chatlist = ref<IDialogData[]>([])
const hoverItemId = ref<string>('')

const userInfo = useUserInfoStore()
function getDialogPage() {
  getTopDialogList().then((res) => {
    if (!res.data.ok) return
    chatlist.value = res.data.entity.rows
  })
}
onBeforeMount(() => {
  getDialogPage()
})

const modalTitle = ref('编辑会话')

function getTopDialogList() {
  return page({
    userId: userInfo.id as string,
    pageSize: '100'
  })
}

function handleUpdate() {
  if (!dialogName.value.length) {
    message.error('会话名称不能为空')
    return
  }

  saveOrUpdate({
    id: dialogId.value,
    userId: userInfo.id as string,
    dialogName: dialogName.value
  }).then((res) => {
    if (!res.data.ok) return
    chatlist.value = res.data.entity.rows
    showCreateDialogModal.value = false
    dialogId.value = ''
    dialogName.value = ''
    bus.emit('refreshDiaglogName')
  })
}

const bus = useChatBus((e) => {
  switch (e) {
    case 'refreshDiaglogName':
      getDialogPage()
      break
    default:
      ''
  }
})
// useChatBus
function handleMenuClick(key: string, id:string, name?: string) {

  switch (key) {
    case 'remove': {
      Modal.confirm({
        title: '确定删除',
        content: `该会话吗`,
        onOk() {
          remove(id).then(() => {
            bus.emit('refreshDiaglogName')
          })
        }
      })
      break
    }
    case 'rename': {
      dialogId.value = id
      dialogName.value = name as string
      showCreateDialogModal.value = true
      break
    }
  }
}
const  itemHover =(id:string)=>{
  console.log(id,'itemHover')
  hoverItemId.value = id
}
const itemLeave = ()=>{
  console.log('itemLeave')
  hoverItemId.value = ''
}
const routerTo = (item:any) =>{
  const value = item
    if(value.queryType === 1){
      router.push({
      path:`/chat/${value.id}`
    })
    }else{
      router.push({
        path:`/chat/documentParsing/${value.id}`,
      })
    }
}
</script>
<style lang="scss" scoped>
.chat-list-container{
  background: #fff;
  padding:0 ;
}
.session-list {
  width: 100%;
  padding: 16px 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.session-item {
  width: 100%;
  max-width: 800px;
  display: flex;
  padding: 18px 24px;
  user-select: none;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e7e9ec;
  color: #0d1c2e;
  &:hover {
    background: #F7F9FC;
  }

  .date {
    color: #707c97;
  }
}
.header{
  height: 61px;
  color: #0D1C2E;
  font-size: 16px;
  background: #fff;
  justify-content: center;
  border-bottom: 1px solid #E7E9EC;
  font-weight: 500;
  margin: 0 23px;
}
.chat-list-wrap {
  background-color: white;
  height: calc(100vh - 61px);
  overflow: auto;
}
.icon {
  width: 24px;
  height: 24px;
}

.dialog-name {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
}
.button-group{
  color: #0D1C2E;
  flex-direction: row-reverse;
}
.chat-list-edit-btn{
  margin-right: 27px;
  cursor: pointer;
  .chat-list-edit-icon{
    background-image: url('@/static/image/chat-list-edit.png');
    background-size: contain;
    margin-right: 6px;
  }
}
.chat-list-edit-btn:hover{
  color: #3C7BFF;
  .chat-list-edit-icon{
    background-image: url('@/static/image/chat-lit-edit-hover.png');
  }
}
.chat-list-delete-btn{
  cursor: pointer;
  .chat-list-delete-icon{
    background-image: url('@/static/image/chat-list-delete.png');
    background-size: contain;
    margin-right: 6px;
  }
}
.chat-list-delete-btn:hover{
  color: #FC5D50;
  .chat-list-delete-icon{
    background-image: url('@/static/image/chat-list-delete-hover.png');
  }

}
</style>
